<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>新品特区</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/toastr.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style>
        /*//头部*/
        body {
            font-size: 14px;
        }

        header {
            width: 100%;
            background: #fff;
            position: relative;
            height: 86px;
            z-index: 9;
        }

        .header-top {
            line-height: 45px;
            height: 45px;
        }

        .aui-icon-left {
            padding-left: 10px;
        }

        .win_title {
            width: auto;
            text-align: center;
            position: absolute;
            right: 80px;
            left: 80px;
        }

        .title {
            width: 100%;
            overflow: hidden;
            background: #fff;
            position: relative;
        }

        .ulTitle {
            padding: 0 10px;
        }

        .ulTitle li {
            padding: 10px 0;
            margin-right: 30px;
            float: left;
        }

        .ulTitle {
            margin: 0 25px;
            overflow: hidden;
            position: relative;
        }

        .pre,
        .next {
            position: absolute;
            font-family: "auiicon" !important;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 30px;
            background: #fff;
            text-align: center;
            z-index: 9;
            padding: 10px 0;
            /*height: 100%;*/
        }

        .pre {
            left: 0px;
        }

        .next {
            right: 0px;
        }
    </style>
</head>
<body>
<header class=" aui-border-b">
    <div class="header-top aui-border-b">
        <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
        <div class="win_title aui-ellipsis-1">
            新品特区
        </div>
    </div>
    <div class="title" id="headerTitle">
        <div class="divTitle">
            <!-- 头部分类 -->
            <ul class="ulTitle">
                <li class="active" tapmode onclick="switchChange(this)">灯饰照明1</li>
                <li class="" tapmode onclick="switchChange(this)">地板2</li>
                <li class="" tapmode onclick="switchChange(this)">吊顶3</li>
                <li class="" tapmode onclick="switchChange(this)">管材4</li>
                <li class="" tapmode onclick="switchChange(this)">装饰面料5</li>
                <li class="" tapmode onclick="switchChange(this)">门窗6</li>
                <li class="" tapmode onclick="switchChange(this)">管材7</li>
                <li class="" tapmode onclick="switchChange(this)">地板8</li>
                <li class="" tapmode onclick="switchChange(this)">吊顶9</li>
                <li class="" tapmode onclick="switchChange(this)">管材10</li>
            </ul>
        </div>
        <span class="pre" tapmode onclick="pre()"><</span>
        <span class="next" tapmode onclick="next()">></span>
    </div>
</header>
<div class=" contain">
    <div class="wrapper">
        <div id="scroller-pullDown">
                <span class="aui-iconfont aui-icon-refresharrow downIcon">
                </span>
            <span id="pullDown-msg" class="pull-down-msg ">下拉刷新</span>
        </div>
        <ul class="aui-list-view aui-grid-view bigPic">
            <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openToTwo('proInfo_win')">
                <div class="proPic"><img class="aui-img-object" src="../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表图文列表图文列表
                    </div>
                    <div class="divPrice">
                        ￥<span class="price ">55.0</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openToTwo('proInfo_win')">
                <div class="proPic"><img class="aui-img-object" src="../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表图文列表图文列表
                    </div>
                    <div class="divPrice">
                        ￥<span class="price ">55.0</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openToTwo('proInfo_win')">
                <div class="proPic"><img class="aui-img-object" src="../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表图文列表图文列表
                    </div>
                    <div class="divPrice">
                        ￥<span class="price ">55.0</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openToTwo('proInfo_win')">
                <div class="proPic"><img class="aui-img-object" src="../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表图文列表图文列表
                    </div>
                    <div class="divPrice">
                        ￥<span class="price ">55.0</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openToTwo('proInfo_win')">
                <div class="proPic"><img class="aui-img-object" src="../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表图文列表图文列表
                    </div>
                    <div class="divPrice">
                        ￥<span class="price ">55.0</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openToTwo('proInfo_win')">
                <div class="proPic"><img class="aui-img-object" src="../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表图文列表图文列表
                    </div>
                    <div class="divPrice">
                        ￥<span class="price ">55.0</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openToTwo('proInfo_win')">
                <div class="proPic"><img class="aui-img-object" src="../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表图文列表图文列表
                    </div>
                    <div class="divPrice">
                        ￥<span class="price ">55.0</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openToTwo('proInfo_win')">
                <div class="proPic"><img class="aui-img-object" src="../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表图文列表图文列表
                    </div>
                    <div class="divPrice">
                        ￥<span class="price ">55.0</span>
                    </div>
                </div>
            </li>
        </ul>
        <div id="scroller-pullUp">
            <i class="aui-iconfont aui-icon-refresharrow upIcon"></i>
            <span id="pullUp-msg" class="pull-up-msg"> 上拉刷新</span>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/iscroll2.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/toastr.js"></script>
<script type="text/javascript">

    $(function () {
//        水平滚动
        setWidth();
        loadYanse();
//        垂直滚动
        scrollV();
    })

    function switchChange(obj) {
        // 改变选择状态
        changeCheck(obj);
        var dataID = $(obj).attr("data-id");
        if (dataID) {
            $('#List-content').empty();
            getData(dataID);
        }
    }
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj) {
        $(obj).parent().find("li").removeClass("active");
        $(obj).addClass("active");
    }
    var myScroll;
    // 头部分类滚动
    function loadYanse() {
        myScroll = new IScroll('#headerTitle', {
            scrollX: true,
            scrollY: false,
            mouseWheel: true,
            vScroll: false,
            click: true,
            snap: true,
            beforeScrollStart: function (e) {
                if (this.absDistX > (this.absDistY + 5 )) {
                    // user is scrolling the x axis, so prevent the browsers' native scrolling
                    e.preventDefault();
                }
            }
        });
    }
    // 获取分类要滚动的宽度
    function setWidth() {
        var width = 0;
        $(".ulTitle").find("li").each(function () {
            width += $(this).outerWidth(true);
        })
        $(".divTitle").width(width + 70);
    }
    //单击分类的前进和后退
    function pre() {
        myScroll.prev();
    }
    function next() {
        myScroll.next();

    }
//    垂直滚动
//下拉刷新
    function scrollV() {
        $(".contain").height($("body").height()-$("header").innerHeight());
        myScrollV=new IScroll(".contain",{
            probeType:3,
            click:true
        })
        if(myScrollV.maxScrollY<0){
            $("#scroller-pullUp").css({"display":"block"})
        }
        var upIcon = $(".downIcon"),
            downIcon = $(".upIcon");
        myScrollV.on("scroll",function(){
            var y = this.y,
                maxY = this.maxScrollY - y,
                downHasClass = downIcon.hasClass("reverse_icon"),
                upHasClass = upIcon.hasClass("reverse_icon");
            if(y >= 40 && !downHasClass){
                $(".downIcon").addClass("turnUp");
                downIcon.addClass("reverse_icon");
                $(".pull-down-msg").text("松手刷新");
                return "";
            }else if(y < 5 && downHasClass){
                $(".downIcon").removeClass("turnUp");
                downIcon.removeClass("reverse_icon");
                $(".pull-down-msg").text("下拉刷新");
                return "";
            }
            if(maxY >= 40 && !upHasClass){
                $(".upIcon").addClass("turnDown");
                upIcon.addClass("reverse_icon");
                $(".pull-up-msg").text("松手刷新");
                return "";
            }else if(maxY < 5 && upHasClass){
                $(".upIcon").removeClass("turnDown");
                upIcon.removeClass("reverse_icon");
                $(".pull-up-msg").text("上拉刷新");
                return "";
            }
        });

        myScrollV.on("slideDown",function(){
            //下拉刷新
            if(this.y > 40){
                //添加数据

                myScrollV.refresh();
                toastr.success("下拉数据加载成功");
            }
        });

        myScrollV.on("slideUp",function(){
            //上拉刷新
            if(this.maxScrollY - this.y > 40){
                //添加数据
                myScrollV.refresh();
                toastr.success("上拉数据加载成功");
            }
        });

    }
</script>
</html>
